<template>
  <!-- swiper的bug, 如果数据是从网络获取的, 自动轮播到最后一页之后就不轮播了,
    解决方法, 在swiper组件上添加v-if="数据.length > 0" -->
  <swiper :options="swiperOptions" class="banner" v-if="banners.length > 0">
    <swiper-slide class="item" v-for="item of banners" :key="item.bannerId" >
      <!-- 也就是fastclick监听到img中点击事件, class中有needsclick就会认为你是要点击就不会拦截click过程 -->
      <a href="item.url">
        <img @load="loadImage" class="swiper-img needsclick" v-lazy="item.pic" />
      </a>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
export default {
  name: 'RecommendSwiper',
  props: {
    banners: {
      type: Array,
      default: () => [],
      required: true
    }
  },
  data () {
    return {
      swiperOptions: {
        loop: true,
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false, // 当切换到最后一个slide时停止自动切换
          disableOnInteraction: false // 用户操作swiper之后, 是否禁止autoplay
        },
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination'
        },
        // 告诉swiper我的数据是异步加载的, 数据变化之后要刷新swiper中的内容
        observer: true,
        observeParents: true,
        observeSlideChildren: true
      }
    }
  },
  methods: {
    loadImage() {
      if (!this.checkLoaded) {
        // this.$refs.scroll.refresh()
        this.checkLoaded = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// .wrapper{
//   overflow: hidden;
//   width: 100%;
//   height: 0;
//   // 这里是看图片的百分比宽高设置的
//   padding-bottom: 38.8%;
//   background: pink;
//   position: relative;
//   .item{
//     .swiper-img{
//       width: 100%;
//     }
//   }
// }
.banner{
  .item{
    img{
      width: 100%;
      height: 146px;
    }
  }
}
</style>
<style lang="scss">
.swiper-pagination-bullet{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);;
}
.swiper-pagination-bullet-active{
  background: rgba(255, 255, 255, 0.8) !important;
}
</style>